@import "~bootstrap/dist/css/bootstrap.css";
@import "./lib/reset";
@import "./lib/common";
*{
  margin:0;
  padding:0;
}

body{
  font-size:13px;
  color:#eee;
  font-family:Arial, Helvetica, sans-serif;
  background:url('../assets/bg.jpg') repeat-x #718693;
}

#page{
  /* The main container div */
  width:700px;
  margin:30px auto 0;
}

h1{
  text-align: center;
  color: white;
  font-family: Corbel,'Myriad Pro',Arial, Helvetica, sans-serif;
  overflow: hidden;
  height: 90px;
}

#searchForm{
  /* The search form. */
  background-color:#4C5A65;
  padding:50px 50px 30px;
  margin:0px 0;
  position:relative;

  -moz-border-radius:16px;
  -webkit-border-radius:16px;
  border-radius:16px;
}

fieldset{
  border:none;
}

#searchInputContainer{
  /* This div contains the transparent search box */
  width:420px;
  height:36px;
  background:url("../assets/searchBox.png") no-repeat;
  float:left;
  margin-right:12px;
}
#searchInputContainer{
  /* This div contains the transparent search box */

  height:36px;

  margin-right:12px;
}



#s{
  /* The search text box. */

  border:none;
  color:#888888;
  background:url("../assets/searchBox.png") no-repeat;

  float:left;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  height:36px;
  line-height:36px;
  margin-right:12px;
  outline:medium none;
  padding:0 0 0 35px;
  text-shadow:1px 1px 0 white;
  width:385px;
}

/* The UL that contains the search type icons */

.icons{
  list-style:none;
  margin:10px 0 0 335px;
  height:19px;
  position:relative;
}

.icons li{
  background:url("../assets/icons.png") no-repeat;
  float:left;
  height:19px;
  text-indent:-9999px;
  cursor:pointer;
  margin-right:5px;
}


li.web{ width:15px;}
li.web.active,
li.web:hover{ background-position:left bottom;}

li.images{ width:22px; background-position:-18px 0;}
li.images.active,
li.images:hover{ background-position:-18px bottom;}

li.news{ width:14px; background-position:-44px 0;}
li.news.active,
li.news:hover{ background-position:-44px bottom;}

li.videos{ width:17px; background-position:right 0;}
li.videos.active,
li.videos:hover{ background-position:right bottom;}

span.arrow{
  /* The little arrow that moves below the icons */

  width:11px;
  height:6px;
  margin:21px 0 0 5px;
  position:absolute;
  background:url('../assets/arrow.png') no-repeat;
  left:0;
}


/* The submit button */


.submitButton{
  color:black;
  width:83px;
  height:36px;

  overflow:hidden;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
}

.submitButton:hover{
  background-position:left bottom;
}


/* Styling the search results */


.pageContainer{
  /* Holds each page with search results. Has an inset bottom border. */
  border-bottom:1px solid #5e7481;
  margin-bottom:50px;

  /* Adding a dark bottom border with box shadow */

  -moz-box-shadow:0 1px 0 #798e9c;
  -webkit-box-shadow:0 1px 0 #798e9c;
  box-shadow:0 1px 0 #798e9c;
}


p.notFound{
  text-align:center;
  padding:0 0 40px;
}


/* Web & news results */


.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{
  background-color:#5D6F7B;
  font-size:18px;
  font-weight:normal;
  padding:8px 20px;

  /* Applying CSS3 rounded corners */
  -moz-border-radius:18px;
  -webkit-border-radius:18px;
  border-radius:18px;
}
.webResult h2 b{ color:#fff; }
.webResult h2 a{ color:#eee;border:none;}
.webResult p{ line-height:1.5;padding:15px 20px;}
.webResult p b{ color:white;}
.webResult > a{ margin-left:20px;}


/* Image & video search results */


.imageResult{
  float:left;
  height:180px;
  margin:0 0 20px 40px;
  text-align:center;
  width:152px;
  overflow:hidden;
}
.imageResult img{ display:block;border:none;}
.imageResult a.pic{
  border:1px solid #fff;
  outline:1px solid #777;
  display:block;
  margin:0 auto 15px;
}

/* The show more button */

#more{
  width:83px;
  height:24px;
  background:url('../assets/more.png') no-repeat;
  cursor:pointer;
  margin:40px auto;
}

#more:hover{
  background-position:left bottom;
}



/* Giving Credit */

p.credit{
  margin:20px 0;
  text-align:center;
}

p.credit a{
  background-color:#4B5A64;
  border:1px solid;
  border-color:#3D4D57 #788E9B #788E9B #3D4D57;
  color:#c0d0d8;
  font-size:10px;
  padding:4px 8px;
  text-shadow:1px 1px 0 #38464F;
}

p.credit a:hover{
  background-color:#38464f;
  border-color:#38464f #788E9B #788E9B #38464f;
}

a, a:visited {
  text-decoration:none;
  outline:none;
  border-bottom:1px dotted #97cae6;
  color:#97cae6;
}

a:hover{
  border-bottom:1px dashed transparent;
}

.clear{
  clear:both;
}
